<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Preact App</title>
  </head>
  <body>
    <!-- <script type="module">
      import { h, render } from 'https://esm.sh/preact';

      // Create your app
      const app = h('h1', null, 'Hello World!');

      render(app, document.body);
    </script> -->
    <script type="importmap">
      {
        "imports": {
          "preact": "https://esm.sh/preact@10.19.2",
          "preact/": "https://esm.sh/preact@10.19.2/",
          "htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
        }
      }
    </script>
    <script type="module">
      // import { h, render } from 'https://esm.sh/preact';
      // import htm from 'https://esm.sh/htm';

      // // Initialize htm with Preact
      // const html = htm.bind(h);

      // function App(props) {
      //   return html`<h1>Hello ${props.name}!</h1>`;
      // }

      // render(html`<${App} name="World" />`, document.body);
      import { render } from 'preact';
      import { useReducer } from 'preact/hooks';
      import { html } from 'htm/preact';

      export function Component() {
        return html` <button>abc</button> `;
      }

      export function App() {
        const [count, add] = useReducer((a, b) => a + b, 0);

        return html`
          <button onClick=${() => add(-1)}>Decrement</button>
          <input readonly size="4" value=${count} />
          <button onClick=${() => add(1)}>Increment</button>
          ${Component()}
        `;
      }

      render(html`<${App} />`, document.body);
    </script>
  </body>
</html>
